<template>
  <div class="base-container">
    <div class="verify-menu">
      <el-menu
        :default-active="activeIndex"
        class="verify-menu-box"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item
          v-for="item in navItems"
          :key="item.title"
          :index="'/verify' + item.path"
        >
          {{ item.title }}
        </el-menu-item>
      </el-menu>
    </div>
    <div class="verify-container">
      <div class="title">
        <span class="sp1"></span>
        <span class="sp2">站点管理</span>
      </div>

      <div class="conpane">
        <div>
          <div>
            <router-link to="/verify/add-site">
              <el-button type="primary" :disabled="sites.length==3">+ 添加站点</el-button>
            </router-link>

          </div>
          <div style="font-size: 14px;font-family: Source Han Sans CN;font-weight: 400;color: #999999;line-height: 38px;">
            提示：只可以添加一个主站点，主站点下可以添加多个子链接；删除主站点，将导致所有子链接不可用。
          </div>
        </div>
        <div>
          <site-table></site-table>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  import {validUsername} from "@/utils/validate";
  import {trace} from "../../utils/trace";
  import {getFileUrl} from "../../utils"
  import {upFile} from "../../api/file"
  import {verify} from "../../api/verify"
  import SiteTable from "./conponents/site-table"

  import xStep from "../../components/xStep/xStep"
  import {mapGetters} from "vuex"

  export default {
    components: { SiteTable,xStep },
    name: "site",
    data() {
      return {
        navItems: [
          { title: "企业认证", path: "/index" },
          { title: "站点管理", path: "/site" },
        ],
        loading: false,
        activeId: 1,

      };
    },
    mounted: function () {

    },
    watch: {
      $route: {
        handler: function (route) {
          this.redirect = route.query && route.query.redirect;
        },
        immediate: true
      }
    },
    computed: {
      activeIndex() {
        let navItem = this.navItems.find(item => {
          return this.$route.path.indexOf(item.path) != -1;
        });
        return "/verify" + navItem.path;
      },
      ...mapGetters(["sites"]),
    },
    methods: {
      changeFile: async function (id, value) {
        if (!value) return;
        var file = document.getElementsByClassName("ip-file" + id)[0].children[0];
        this["fileImg" + id] = getFileUrl(file);
        var f2 = file.files[0];

        let param = new FormData(); //创建form对象
        param.append("img", f2);
        var res = await upFile(param);

        this["fileImg" + id] = res.data.url;

      },
      handleSelect(key, keyPath) {
        this.$router.push({ path: key });
      },
      pre: function () {
        this.activeId -= 1;
        if (this.activeId < 0) {
          this.activeId = 1;
        }
      },
      next: function () {
        this.activeId += 1;
        if (this.activeId > 3) {
          this.activeId = 3;
        }
      },
      verify: async function () {
        let param = new FormData(); //创建form对象
        // param.append("file", file);

        param.append("link", this.formData.link);
        param.append("name", this.formData.name);
        param.append("owner", this.formData.owner);
        param.append("companyName", this.formData.companyName);
        param.append("value", this.formData.value);
        param.append("rAddress", this.formData.rAddress);
        param.append("wAddress", this.formData.wAddress);
        param.append("phone", this.formData.phone);
        param.append("email", this.formData.email);
        param.append("cName", this.formData.cName);
        param.append("cPhone", this.formData.cPhone);
        param.append("cEmail", this.formData.cEmail);
        param.append("establishedTime", new Date(this.formData.establishedTime).getTime());
        param.append(
          "licence", this.fileImg1
        );
        param.append(
          "cardFront", this.fileImg2
        );
        param.append(
          "cardBack", this.fileImg3
        );

        var res = await verify(param);
      },

      lookAgreement: function (value) {
        this.$router.push({path: "/verify/agreement"});
      },
      selectImg: function (value) {
        document.getElementsByClassName("ip-file" + value)[0].children[0].click();
      }
    }
  };
</script>

<style lang="scss">
  /* 修复input 背景不协调 和光标变色 */
  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

  $bg: #283443;
  $light_gray: black;
  $cursor: black;

  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
    .register-container .el-input input {
      color: $cursor;
    }
  }

  /* reset element-ui css */
  .register-container {
    .el-input {
      display: inline-block;
      height: 47px;
      width: 85%;

      input {
        background: transparent;
        -webkit-appearance: none;
        border-radius: 5px;
        padding: 12px 5px 12px 15px;
        color: $light_gray;
        height: 47px;
        caret-color: $cursor;

        &:-webkit-autofill {
          box-shadow: 0 0 0px 1000px $bg inset !important;
          -webkit-text-fill-color: $cursor !important;
        }
      }
    }

    .el-form-item {
      /*border: 1px solid rgba(0, 0, 0, 0.3);*/
      /*background: transparent;*/
      /*border-radius: 5px;*/
      color: black;
    }
  }
</style>

<style lang="scss" scoped>
  $bg: white;
  $dark_gray: #889aa4;
  $light_gray: #eee;
  $main_color: #134bde;

  .verify-container {
    min-height: 100%;
    // width: calc(100vw - 72px);
    background-color: $bg;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    border-radius: 10px;
    margin: 36px 36px 0 36px;

    .title {
      position: relative;
      width: 100%;
      background-color: white;
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
      line-height: 38px;
      display: flex;
      align-items: baseline;
      border-bottom: 1px solid #f0f0f0;
      padding: 5px 2rem;

      .sp1 {
        width: 4px;
        height: 19px;
        background: #134bdf;
        border-radius: 2px;
        margin-right: 10px;
      }

      .sp2 {
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        line-height: 38px;
      }
    }

    .conpane {
      width: 100%;
      padding: 1rem 2rem;

      .top-step {
        background-color: rgba(237, 241, 244, 0.5);
        padding: 0.6rem;
      }

      .minLH {
        line-height: 1.5rem;
        color: #ff1f34;
      }

      .c-con {
        width: 990px;
        margin: 5px calc(50% - 495px);

        .c-con-m {
        }

        .p3 {
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #333333;
          line-height: 38px;
        }

        .p2-text {
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ff1f34;
          line-height: 38px;
        }

        .c-con-m-p {
          .ip-file1,
          .ip-file2,
          .ip-file3 {
            width: 140px;
            height: 140px;
            position: absolute;
            opacity: 0;
          }

          .c-con-m-t {
            border-bottom: 1px solid #f0f0f0;
            padding: 0 10px;
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #666666;
            line-height: 38px;
            margin: 20px 0;
          }
        }
      }
    }
  }

  .verify-menu {
    text-align: center;
    background-color: white;

    .verify-menu-box {
      margin-top: 4px;
      display: inline-block;
      overflow: auto;
      border-bottom-color: #ffffff !important;
    }
  }
</style>

<style scoped>
  ::v-deep .el-input {
    width: 640px;
  }

  .el-step.is-center .el-step__line {
    left: 0%;
    right: 0;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  ::v-deep .el-dialog {
    border-radius: 10px;
    width: 1150px;
    max-width: 80%;
  }

  .decoration input {
    text-decoration: line-through;
  }
</style>
